<template>
  <view class="return_box" :style="{ top: statusBarHeight + 'px' }">
    <up-icon
      name="close"
      class="close"
      color="#fff"
      size="24"
      @click="goHome"
    ></up-icon>
  </view>
  <view class="content">
    <view class="title" :style="{ paddingTop: navHeight }"
      >起一个响亮的昵称吧!</view
    >
    <div class="inputBox">
      <image
        class="avater"
        :src="
          formData.headUrl
            ? formData.headUrl
            : 'http://112.124.50.179:8888/imgs/login/avater_empty.png'
        "
        @click="uploadAvater"
      ></image>
      <view class="text" @click="uploadAvater">上传头像</view>

      <view class="label">昵称</view>
      <up-input
        v-model.trim="formData.nickeName"
        border="bottom"
        placeholder="给自己想个名字吧"
        color="#fff"
        placeholderClass="placeholderClass"
        maxlength="11"
        clearable
      ></up-input>
      <view class="label">邀请码(选填)</view>
      <up-input
        v-model.trim="formData.invitationCode"
        border="bottom"
        placeholder="输入邀请码,若无可不填"
        color="#fff"
        placeholderClass="placeholderClass"
        maxlength="20"
        clearable
      ></up-input>

      <view class="achieveBtn" @click="achieve">完成</view>
    </div>
  </view>
</template>

<script setup>
import { getCurrentInstance, ref, reactive } from "vue";
import { changeuserinfo } from "@/API/login/login.js";
let navHeight = ref(getApp().globalData.navHeight + 120 + "rpx");
const statusBarHeight = getApp().globalData.statusBarHeight;

const $chooseImg =
  getCurrentInstance().appContext.config.globalProperties.$chooseImg;
const formData = reactive({
  nickeName: "",
  invitationCode: "",
  headUrl: "",
});
const goHome = () => {
  uni.reLaunch({
    url: "/pages/home/index/index",
  });
};

/**
 * 点击完成按钮
 */
const achieve = async () => {
  if (formData.headUrl === "") {
    uni.showToast({
      title: "请设置头像！",
      icon: "none",
      duration: 2000,
    });
  } else if (formData.nickeName === "") {
    uni.showToast({
      title: "请输入昵称！",
      icon: "none",
      duration: 2000,
    });
  }
  let rst = await changeuserinfo(formData);
  if (rst.data.code == 0) {
    uni.showToast({
      title: rst.data.msg,
      icon: "success",
      duration: 1000,
    });
    setTimeout(() => {
      goHome();
    }, 1000);
  } else {
    uni.showToast({
      title: rst.data.msg,
      icon: "success",
      duration: 1000,
    });
  }
};

/**
 * 上传头像
 */
const uploadAvater = () => {
  $chooseImg
    .chooseImg({
      formData: {
        fileType: "image",
        fileDirType: "personal",
      },
      countLimit: 1,
    })
    .then((res) => {
      formData.headUrl = JSON.parse(res[0].img_url.data).fileUrl;
    });
};
</script>

<style lang="scss">
page {
  background: url("http://112.124.50.179:8888/imgs/login/bg.png") no-repeat;
  background-size: cover;
}

.return_box {
  position: fixed;
  height: 88rpx;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 22rpx;
  box-sizing: border-box;
  z-index: 999;
}

.content {
  padding: 32rpx 64rpx;
}

.title {
  //   margin-top: 120rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 48rpx;
  color: #ffffff;
  line-height: 56rpx;
  letter-spacing: 1px;
  font-style: normal;
  text-transform: none;
}

.inputBox {
  margin: auto;
  margin-top: 120rpx;
  width: 622rpx;
  height: 956rpx;
  background-size: 100%;
  //   background-position: center;
  background-image: url("http://112.124.50.179:8888/imgs/login/border.png");
  background-repeat: no-repeat;
  padding: 144rpx 48rpx 64rpx;
  box-sizing: border-box;
  position: relative;

  .avater {
    width: 104rpx;
    height: 104rpx;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    border-radius: 50%;
  }

  .text,
  .label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 38rpx;
    letter-spacing: 1px;
    margin-top: 16rpx;
    text-align: center;
  }

  .label {
    // margin: 64rpx 0 40rpx 0;
    margin-top: 64rpx;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: calc(40rpx - 6px);
    text-align: left;
  }

  .placeholderClass {
    font-weight: 400;
    font-size: 32rpx;
    color: #c5c5c5;
    letter-spacing: 1px;
    font-style: normal;
    text-transform: none;
    padding: 0 0 32rpx 0;
    box-sizing: content-box;
  }
}

::v-deep .u-input {
  padding: 0 !important;
}

::v-deep .u-input__content__field-wrapper__field {
  height: 70rpx !important;
}

::v-deep .uni-input-input {
  height: 70rpx !important;
  padding-bottom: 32rpx;
  font-weight: 400;
  font-size: 32rpx;
  color: #ffffff;
}

.u-input__content__clear {
  margin-bottom: 30rpx !important;
}

.achieveBtn {
  width: 100%;
  height: 80rpx;
  background: #f3e0bb;
  border-radius: 48rpx 48rpx 48rpx 48rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #524630;
  line-height: 80rpx;
  letter-spacing: 1px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 80rpx;
}
</style>
